<template>
  <div class="style_config">
    <el-row class="style_fig">
      <div :class="configType === 'newConfig' ? 'new_left_warp' : 'left_warp'">
        <el-col :span="11" :class="configType === 'newConfig' ? 'new_left_style' : 'left_style'" style="width: 600px">

          <affix class="basicSet" :label="$t('configLazyLoad.channel.dockingBasic')">
            <el-form ref="form" :model="form" :label-position="'left'"  label-width="160px">
              <el-form-item :label="$t('configLazyLoad.channel.webName')">
                <el-input v-model.trim="form.name" size="mini"></el-input>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.webUrl')">
                <el-input v-model.trim="form.webDomain" :placeholder="$t('configLazyLoad.channel.inputWebUrl')" size="mini"></el-input>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.webTitle')" style="position: relative;">
                <el-input v-model.trim="form.pageTitle" placeholder="www.7moor.com" size="mini"></el-input>
                <el-tooltip class="item" effect="dark" :content="$t('configLazyLoad.channel.webTitleTip')" placement="bottom">
                  <span class="iconfont icon-tixingweizhi"></span>
                </el-tooltip>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.useSche')" v-show="configType === 'config'">
                <el-radio-group v-model.trim="form.scheduleEnable">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.scheTip')}}</span></div>
              </el-form-item>
              <skillGroupWebchat
                ref="skillGroupForm"
                v-show="!form.scheduleEnable"
                :toPeerInfo="form.ToPeer"
                :openWeightInfo="form.isOpenWeight"
                :peerWeightInfo="form.ToPeerWeight"
                :todoRandom="todoRandom"
                @showPriorityReceptionFun="showPriorityReceptionFun"
              ></skillGroupWebchat>

              <el-form-item v-show="!form.scheduleEnable" :label="$t('configLazyLoad.channel.enableRobot')">
                <el-row>
                  <el-col :span="12">
                    <el-select v-model="form.robot" @visible-change="robotSelectShow" @change="showPriorityReceptionFun">
                      <el-option value="">{{$t('public.pleasePick')}}</el-option>
                      <el-option
                        v-for="item in robotConfig"
                        :key="item._id"
                        :label="item.robot_name_new"
                        :disabled="item.disabled"
                        :value="item._id"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12" v-show="showPriorityReception">
                    <el-checkbox class="priorityReceptionCheck" v-model="form.priorityReception">{{$t('configLazyLoad.channel.enablePriorityReception')}}</el-checkbox>
                    <el-tooltip class="item" effect="dark" placement="bottom">
                      <div slot="content">
                        <h4>{{$t('configLazyLoad.channel.priorityReception')}}</h4>
                        <div>{{$t('configLazyLoad.channel.priorityReceptionExplanation')}}</div>
                      </div>
                      <span class="prompt introduce">{{$t('sms.introduce')}}</span>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.enableRobotAgent')" v-if="!form.scheduleEnable && aiRobots.length > 0">
                <el-row>
                  <el-col :span="12">
                    <el-select v-model="form.robotAssistId" @visible-change="robotSelectShow">
                      <el-option value="">{{$t('public.pleasePick')}}</el-option>
                      <el-option
                        v-for="item in aiRobots"
                        :key="item._id"
                        :label="item.robot_name_new"
                        :disabled="item.disabled"
                        :value="item._id">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.robotTip')}}</span></div>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.enableSatis')" v-show="configType === 'config'">
                <el-radio-group v-model="form.webchat_csr">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.styleTip1')" >
                <el-radio-group v-model="form.backJsEnable">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.styleTip2')}}</span></div>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.styleTip4')" >
                <el-radio-group v-model="form.isTurnHumanSessionForm">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.styleTip3')}}</span></div>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.agentFormLabel')" v-if="form.isTurnHumanSessionForm" >
                <el-select v-model="form.turnHumanSessionFormId">
                  <el-option
                    v-for="(item, index) in turnHumanOptions"
                    :key="index"
                    :label="item.sessionForm | filterName"
                    :value="item._id">
                  </el-option>
                </el-select>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.agentFormTip')}}</span></div>
              </el-form-item>
              <el-form-item v-if="form.userBehaviorReplay || this.$store.state.session.user.type === 'admin'" :label="$t('configLazyLoad.channel.enableReplay')" >
                <el-radio-group v-model="form.userBehaviorReplay">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </affix>

          <affix class="basicSet padding_bottom" :label="$t('configLazyLoad.channel.turnManConfig')">
            <el-form ref="form" :model="form" :label-position="'left'"  label-width="160px">
              <el-form-item :label="$t('configLazyLoad.channel.turnTip1')">
                <el-radio-group v-model.trim="form.showTransferBtn">
                  <el-radio :label="true">{{$t('public.yes')}}</el-radio>
                  <el-radio :label="false">{{$t('public.no')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.turnTip2')}}</span></div>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.turnTip3')">
                <el-radio-group v-model.trim="form.openTriggerWord">
                  <el-radio :label="true">{{$t('public.yes')}}</el-radio>
                  <el-radio :label="false">{{$t('public.no')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt">{{$t('configLazyLoad.channel.turnTip4')}}</span></div>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.turnManWord')" v-show="form.openTriggerWord">
                <el-input v-model.trim="form.convert_words" :placeholder="$t('configLazyLoad.channel.turnTip5')" size="mini"></el-input>
                <div class="prompt"><span class="prompt" v-html="$t('configLazyLoad.channel.turnTip6')"></span></div>
              </el-form-item>
            </el-form>
          </affix>
          <affix class="basicSet padding_bottom" :label="$t('configLazyLoad.channel.QueueKeeping')">
            <template slot="questionSlot">
              <div class="questionToolTip">
                <el-tooltip class="item remark" effect="dark" placement="bottom">
                  <div slot="content" v-html="$t('configLazyLoad.channel.QueueKeeping4')"></div>
                  <i class="iconfont icon-tixingweizhi" style="margin: 0; position: none"></i>
                </el-tooltip>
              </div>
            </template>
            <el-form ref="form" :model="form" :label-position="'left'"  label-width="160px">
              <el-form-item>
                <span slot='label'>
                  {{$t('configLazyLoad.channel.QueueKeeping1')}}
              </span>
                <el-radio-group v-model.trim="form.queueKeep">
                  <el-radio :label="true">{{$t('public.yes')}}</el-radio>
                  <el-radio :label="false">{{$t('public.no')}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-show='form.queueKeep'>
                <el-input v-model.trim.number="form.queueKeepTime" style="width: 130px; margin-right: 20px" @blur='queueKeepTimeBlur' min="1" max="720" type="number" :placeholder="$t('configLazyLoad.channel.QueueKeeping2')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.QueueKeeping3')}}</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <span slot='label'>
                  {{$t('configLazyLoad.channel.QueueKeeping5')}}
                </span>
                <el-radio-group v-model.trim="form.queueKeepTips">
                  <el-radio :label="true">{{$t('public.yes')}}</el-radio>
                  <el-radio :label="false">{{$t('public.no')}}</el-radio>
                </el-radio-group>
                <div class="prompt"><span class="prompt" v-html="$t('configLazyLoad.channel.QueueKeeping6')"></span></div>
              </el-form-item>
            </el-form>
          </affix>
          <affix class="basicSet" :label="$t('configLazyLoad.channel.conversationConfig')" v-show="configType === 'config'">
            <el-form ref="form" :model="form" :label-position="'left'"  label-width="160px">
              <el-form-item :label="$t('configLazyLoad.channel.mode')">
                <div>
                  <el-radio v-model="form.autoShowInviteType" :label="'1'">{{$t('configLazyLoad.channel.direcTalk')}}</el-radio>
                </div>
                <p class="help-tips font12">{{$t('configLazyLoad.channel.robotTip2')}}</p>
                <div>
                  <el-radio v-model="form.autoShowInviteType" :label="'2'">{{$t('configLazyLoad.channel.inviteConfirm')}}</el-radio>
                  <span class="setInviteStyle font12" @click="setInviteStyle">{{$t('configLazyLoad.channel.setStyle')}}</span>
                </div>
                <p class="help-tips font12">{{$t('configLazyLoad.channel.robotTip2')}}</p>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.enableAutoPop')">
                <el-radio-group v-model.trim="form.autoInvite">
                  <el-radio :label="'0'">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="'1'">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.channel.turnTip7')" v-show="form.autoInvite === '1'">
                <el-checkbox-group v-model.trim="form.autoInviteTerminal">
                  <el-checkbox :label="'pc'" name="autoInviteTerminal">{{$t('configLazyLoad.channel.pc')}}</el-checkbox>
                  <el-checkbox :label="'mobile'" name="autoInviteTerminal">{{$t('configLazyLoad.channel.mobile')}}</el-checkbox>
                </el-checkbox-group>
                <div class="sourse_cur font12" v-show="form.autoInvite === '1'">
                  <span>{{$t('configLazyLoad.channel.openStop')}}</span>
                  <el-input size="mini" class="inviteInput" v-model.trim="form.openStayTime" type="number" min="0" @blur="timeBlur"></el-input>
                  <span>{{$t('configLazyLoad.channel.pop1')}}</span>
                </div>
                <div class="sourse_cur font12" v-show="form.autoInvite === '1'">
                  <span>{{$t('configLazyLoad.channel.pop2')}}</span>
                  <el-input size="mini" class="inviteInput" v-model.trim="form.closeStayTime" type="number" min="0" @blur="timeBlur"></el-input>
                  <span>{{$t('configLazyLoad.channel.pop3')}}</span>
                </div>
                <autoPopupTimeSet v-show="form.autoInvite === '1'" :inviteData="form.autoInviteData" :websiteId="form._id"></autoPopupTimeSet>
              </el-form-item>
            </el-form>
          </affix>

          <affix :label="$t('configLazyLoad.channel.windowStyle')" class="fir_tit padding_bottom">
            <el-form ref="formWindowStyle" :rules="rules" :model="cssStyle" :label-position="'left'"  label-width="182px">
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyle')}}</el-col>
                <el-col :span="16" class="win_box">
                  <div class="win win0" :class="{active: changeWindow === 'pure'}" @click="chooseWin('0')">
                    <img src="../../../../.././../assets/img/config/win0.png" alt="">
                    <i class="iconfont icon-xuanzhong"></i>
                  </div>
                  <div class="win" :class="{active: cssStyle.advConfig.advType === '1' && changeWindow === 'common'}" @click="chooseWin('1')">
                    <img src="../../../../.././../assets/img/config/win1.png" alt="">
                    <i class="iconfont icon-xuanzhong"></i>
                  </div>
                  <div class="win" :class="{active: cssStyle.advConfig.advType === '2' && changeWindow === 'common'}" @click="chooseWin('2')">
                    <img src="../../../../.././../assets/img/config/win2.png" alt="">
                    <i class="iconfont icon-xuanzhong"></i>
                  </div>
                  <div class="win" :class="{active: cssStyle.advConfig.advType === '3' && changeWindow === 'common'}" @click="chooseWin('3')">
                    <img src="../../../../.././../assets/img/config/win3.png" alt="">
                    <i class="iconfont icon-xuanzhong"></i>
                  </div>
                  <div class="win" :class="{active: cssStyle.advConfig.advType === '4' && changeWindow === 'common'}" @click="chooseWin('4')">
                    <i class="iconfont icon-xuanzhong"></i>
                    <img src="../../../../.././../assets/img/config/win4.png" alt="">
                  </div>
                </el-col>
              </el-row>
              <el-row class="config openChatWayBox">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyle2')}}</el-col>
                <el-col :span="16">
                  <el-col :span="11">
                    <el-radio class="radio" v-model="cssStyle.openChatWay" label="normal">{{$t('configLazyLoad.channel.webStyle3')}}</el-radio>
                    <img class="openChatWay_img" src="../../../../.././../assets/img/config/openChatWay1.png" alt="">
                  </el-col>
                  <el-col :span="11">
                    <el-radio class="radio" v-model="cssStyle.openChatWay" label="newPage">{{$t('configLazyLoad.channel.webStyle4')}}</el-radio>
                    <img class="openChatWay_img" src="../../../../.././../assets/img/config/openChatWay2.png" alt="">
                  </el-col>
                  <el-tooltip class="item remark" effect="dark" placement="bottom">
                    <div slot="content" v-html="$t('configLazyLoad.channel.webStyleTip')"></div>
                    <span class="welcomeTip  openChatWayTip"><i class="iconfont icon-tixingweizhi"></i></span>
                  </el-tooltip>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyle4')}}</el-col>
                <el-col :span="16">
                  <el-input  v-model.trim="cssStyle.chatMarginTop" min="0" max="200" type="number" :placeholder="$t('public.pleaseEnter')" size="mini" @blur="blurMar('chatMarginTop')">
                    <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                  </el-input>
                  <div class="desc">{{$t('configLazyLoad.channel.webStyleTip2')}}</div>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-form-item :label="$t('configLazyLoad.channel.enterName')" prop="companyName">
                  <el-input v-model.trim="cssStyle.companyName" :placeholder="$t('public.pleaseEnter')" size="mini"></el-input>
                </el-form-item>
              </el-row>
              <el-row class="config" v-if="progressUi.show">
                <el-col :span="8">&nbsp;</el-col>
                <el-col :span="16">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="progressUi.percent" :status="progressUi.type" v-if="progressUi.show"></el-progress>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.enterLogo')}}</el-col>
                <el-col :span="16">
                  <div class="wrap_logo">
                    <img v-show="cssStyle.companyLogo" :src="cssStyle.companyLogo" alt="" class="logo fl">
                    <p class="btn fl" id="uploadlogoFile">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                    <p class="btn fl del_upload_file" v-show="cssStyle.companyLogo" @click="deleteUploadFile('companyLogo')">{{$t('public.delete')}}</p>
                  </div>
                  <span class="desc">{{$t('configLazyLoad.channel.webStyleTip3')}}</span>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip4')}}</el-col>
                <el-col :span="16">
                  <el-radio class="radio" v-model="cssStyle.showAgentName" :label="true">{{$t('public.yes')}}</el-radio>
                  <el-radio class="radio" v-model="cssStyle.showAgentName" :label="false">{{$t('public.no')}}</el-radio>
                </el-col>
              </el-row>
              <el-row class="config" v-show="!form.scheduleEnable">
                <el-col :span="8">{{$t('configLazyLoad.channel.systemWelcome')}}</el-col>
                <el-col :span="16">
                  <div class="remark">
                    <span>{{$t('configLazyLoad.channel.webStyleTip5')}}</span>
                    <el-tooltip class="item" effect="dark" popper-class="reportTip" placement="bottom" style="opacity: 1;">
                      <div slot="content">
                        {{$t('configLazyLoad.channel.webStyleTip6')}}
                      </div>
                      <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
                    </el-tooltip>
                  </div>
                  <div class="placeholder_box">
                    <dl v-for="place in placeholderArr" @click="addPlaceholder(place.data)" :title="place.content">
                      {{place.content}}
                      <i class="iconfont icon-zhankai"></i>
                    </dl>
                  </div>
                  <el-input
                    type="textarea"
                    :rows="2"
                    :placeholder="$t('configLazyLoad.channel.welcome')"
                    v-model="cssStyle.welcome">
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="config" v-if="systemMsgLogoUi.show">
                <el-col :span="8">&nbsp;</el-col>
                <el-col :span="16">
                  <el-progress :text-inside="true" :stroke-width="18" :percentage="systemMsgLogoUi.percent" :status="systemMsgLogoUi.type" v-if="systemMsgLogoUi.show"></el-progress>
                </el-col>
              </el-row>
              <welcomeMsgEditBox
                ref="welcomeMsgBox"
                v-show="!form.scheduleEnable"
                :formId="form._id"
                :platform="'web'"
                :agentWelMsgPush="form.convertManualAfterMsgSwitch"
                :agentWelMsgCon="form.convertManualAfterMsg"></welcomeMsgEditBox>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.systemAvater')}}</el-col>
                <el-col :span="16">
                  <div class="wrap_logo">
                    <img v-show="cssStyle.systemMsgLogo" :src="cssStyle.systemMsgLogo" alt="" class="logo fl">
                    <p class="btn fl" id="uploadSystemLogo">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                    <p class="btn fl del_upload_file" v-show="cssStyle.systemMsgLogo" @click="deleteUploadFile('systemMsgLogo')">{{$t('public.delete')}}</p>
                  </div>
                  <span class="desc">{{$t('configLazyLoad.channel.webStyleTip7')}}</span>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.boxSkin')}}</el-col>
                <el-col :span="16">
                  <div class="chat_box">
                    <span v-for="(color,index) in colors" :style="{background: color}" @click="addBack(index)"><span v-if="showBack === index" class="iconfont icon-fasongchenggong"></span></span>
                    <div class="wrapColor">
                      <el-color-picker v-model="cssStyle.styleColor" @change="colorPickChange" class="fl" size="mini"></el-color-picker>
                      <el-input v-model.trim="cssStyle.styleColor" :minlength="1" :maxlength="7" class="fl" @blur="styleColorBlur" size="mini"></el-input>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip8')}}</el-col>
                <el-col :span="16">
                  <el-radio class="radio" v-model="cssStyle.showCloseButton" :label="true">{{$t('configLazyLoad.channel.show')}}</el-radio>
                  <el-radio class="radio" v-model="cssStyle.showCloseButton" :label="false">{{$t('public.searchSettingsItemHidden')}}</el-radio>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip110')}}</el-col>
                <el-col :span="16">
                  <el-radio class="radio" v-model="cssStyle.defaultMute" :label="false">{{$t('configLazyLoad.public.open')}}</el-radio>
                  <el-radio class="radio" v-model="cssStyle.defaultMute" :label="true">{{$t('configLazyLoad.public.close')}}</el-radio>
                </el-col>
              </el-row>
            </el-form>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip10')" class="fir_tit">
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip9')}}</el-col>
              <el-col :span="16">
                <el-radio-group v-model.trim="form.cyclic_welcome">
                  <el-radio :label="false">{{$t('config.channel.notEnabled')}}</el-radio>
                  <el-radio :label="true">{{$t('sms.reuse')}}</el-radio>
                </el-radio-group>
              </el-col>
              <p class="desc">{{$t('configLazyLoad.channel.webStyleTip11')}}</p>
            </el-row>
            <el-row class="config" v-if="welcomeLogoUi.show">
              <el-col :span="8">&nbsp;</el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="18" :percentage="welcomeLogoUi.percent" :status="welcomeLogoUi.type" v-if="welcomeLogoUi.show"></el-progress>
              </el-col>
            </el-row>
            <el-row class="config" v-show="form.cyclic_welcome">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip12')}}</el-col>
              <el-col :span="16">
                <div class="wrap_logo">
                  <img v-show="form.cyclic_welcome_config.url" :src="form.cyclic_welcome_config.url" alt="" class="logo fl">
                  <p class="btn fl" id="uploadWelcomeFile">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                  <p class="btn fl del_upload_file" v-show="form.cyclic_welcome_config.url" @click="deleteUploadFile('url')">{{$t('public.delete')}}</p>
                </div>
                <span class="desc">{{$t('configLazyLoad.channel.webStyleTip7')}}</span>
              </el-col>
            </el-row>
            <el-row class="config" v-show="form.cyclic_welcome">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip13')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="form.cyclic_welcome_config.agent" :placeholder="$t('configLazyLoad.channel.webStyleTip13')" size="mini"></el-input>
              </el-col>
            </el-row>
            <el-row class="config" v-show="form.cyclic_welcome">
              <div>{{$t('configLazyLoad.channel.webStyleTip14')}}</div>
              <el-row style="padding: 5px 0;text-align: center">
                <el-col :span="12">{{$t('configLazyLoad.channel.webStyleTip15')}}</el-col> <el-col :span="6">
                <span>{{$t('configLazyLoad.channel.webStyleTip16')}}</span>
                <el-tooltip :content="$t('configLazyLoad.channel.webStyleTip17')" placement="bottom" effect="dark">
                  <span class="welcomeTip"><i class="iconfont icon-tixingweizhi"></i></span>
                </el-tooltip></el-col>
                <el-col :span="4">{{$t('public.operate')}}</el-col>
              </el-row>
              <div class="clearfix" style="text-align: center;" v-for="(welcome, index) in form.cyclic_welcome_config.welcome">
                <el-col :span="12" style="margin: 5px 0;">
                  <span style="margin-right: 5px">{{index + 1}} .</span><el-input v-model.trim="welcome.content" type="text" style="width: 200px" :maxlength="140" :placeholder="$t('public.pleaseEnter')" size="mini"></el-input>
                </el-col>
                <el-col :span="6" style="margin: 5px 0;">
                  <el-input v-model.trim="welcome.delay" style="width: 60px;" type="number" :max="120" :min="1"></el-input>
                </el-col>
                <el-col :span="4" style="margin: 5px 0;"><span class="btn-span" @click="deleteWelcome(index)">{{$t('public.delete')}}</span></el-col>
              </div>
              <el-col :span="24">
                <p style="margin: 5px 0; padding-left: 30px" class="btn-span" @click="addWelcome">{{$t('public.add')}}</p>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip18')" class="fir_tit padding_bottom" v-show="changeWindow === 'common' && (cssStyle.advConfig.advType === '2' || cssStyle.advConfig.advType === '3')">
            <el-row class="config" v-if="lfAdvtLogoUi.show">
              <el-col :span="8">&nbsp;</el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="18" :percentage="lfAdvtLogoUi.percent" :status="lfAdvtLogoUi.type" v-if="lfAdvtLogoUi.show"></el-progress>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip19')}}</el-col>
              <el-col :span="16">
                <div class="wrap_logo">
                  <img v-show="cssStyle.advConfig.uploadLeftAdvtImg" :src="cssStyle.advConfig.uploadLeftAdvtImg" alt="" class="logo fl">
                  <p class="btn fl" id="uploadLeftAdvtImg">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                  <p class="btn fl del_upload_file" v-show="cssStyle.advConfig.uploadLeftAdvtImg" @click="deleteUploadFile('uploadLeftAdvtImg')">{{$t('public.delete')}}</p>
                </div>
                <span class="desc">{{$t('configLazyLoad.channel.webStyleTip20')}}</span>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip21')}}</el-col>
              <el-col :span="16">
                <el-input :placeholder="$t('public.pleaseEnter')" v-model.trim="cssStyle.advConfig.uploadLeftAdvtUrl" size="mini"></el-input>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip22')" class="fir_tit padding_bottom" v-show="changeWindow === 'common' && (cssStyle.advConfig.advType === '2' || cssStyle.advConfig.advType === '1')">
            <el-row class="config" v-if="rtAdvtLogoUi.show">
              <el-col :span="8">&nbsp;</el-col>
              <el-col :span="16">
                <el-progress :text-inside="true" :stroke-width="18" :percentage="rtAdvtLogoUi.percent" :status="rtAdvtLogoUi.type" v-if="rtAdvtLogoUi.show"></el-progress>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip19')}}</el-col>
              <el-col :span="16">
                <div class="wrap_logo">
                  <img v-show="cssStyle.advConfig.uploadRightAdvtImg" :src="cssStyle.advConfig.uploadRightAdvtImg" alt="" class="logo fl">
                  <p class="btn fl" id="uploadRightAdvtImg">{{$t('configLazyLoad.channel.uplopadImage')}}</p>
                  <p class="btn fl del_upload_file" v-show="cssStyle.advConfig.uploadRightAdvtImg" @click="deleteUploadFile('uploadRightAdvtImg')">{{$t('public.delete')}}</p>
                </div>
                <span class="desc">{{$t('configLazyLoad.channel.webStyleTip20')}}</span>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip21')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.advConfig.uploadRightAdvtUrl" :placeholder="$t('public.pleaseEnter')" size="mini"></el-input>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip23')" class="fir_tit padding_bottom" v-show="changeWindow === 'pure'">
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.horiDirec')}}</el-col>
              <el-col :span="16">
                <el-select size="mini" v-model="cssStyle.chatboxLocation" style="width: 130px; margin-right: 20px"  :placeholder="$t('public.pleasePick')">
                  <el-option
                    v-for="item in optionsX"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input :disabled="cssStyle.chatboxLocation === 'center'" v-model.trim="cssStyle.chatboxSideMargin" style="width: 130px" min="0" max="990" type="number" :placeholder="$t('public.pleaseEnter')" @blur="blurMar('boxSideMar')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.vertiDirec')}}</el-col>
              <el-col :span="16">
                <el-select size="mini" v-model="cssStyle.chatboxLocationY" style="width: 130px; margin-right: 20px" :placeholder="$t('public.pleasePick')">
                  <el-option
                    v-for="item in optionsY"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input size="mini" :disabled="cssStyle.chatboxLocationY === 'center'"  v-model.trim="cssStyle.chatboxSideMarginY" style="width: 130px" min="0" max="200" type="number" :placeholder="$t('public.pleaseEnter')" @blur="blurMar('boxSideMarY')">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.width')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatboxWidth" style="width: 130px; margin-right: 20px"  min="300" max="600" type="number" :placeholder="$t('public.pleaseEnter')" @blur="blurMar('boxWidth')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
                <span class="desc">{{$t('configLazyLoad.channel.webStyleTip24')}}</span>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.height')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatboxHeight" style="width: 130px; margin-right: 20px"  min="450" max="600" type="number" :placeholder="$t('public.pleaseEnter')" @blur="blurMar('boxHeigt')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
                <span class="desc">{{$t('configLazyLoad.channel.webStyleTip25')}}</span>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip26')" class="padding_bottom" v-show="!form.scheduleEnable">
            <el-row class="config" v-show="isShowBtnText">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip27')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.onlineText" size="mini"></el-input>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip28')}}</el-col>
              <el-col :span="16">
                <div class="btnSty">
                  <span v-for="(icon,index) in icons" class="iconfont" @click= "choseIcon(index)" :class="[cssStyle.chatboxIconType === index + 1 ? 'span-back' : '', icon]"></span>
                </div>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip29')}}</el-col>
              <el-col :span="16">
                <el-select size="mini" v-model="cssStyle.chatButtonLocation">
                  <el-option
                    v-for="item in btnOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="config" v-show="place !== 'side'">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip30')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatButtonSideMargin" type="number" min="0" :placeholder="$t('public.pleaseEnter')" max="999" @blur="blurMar('btnSideMar')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="config" v-show="place !== 'bottom'">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip31')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatButtonBottomMargin" type="number" min="0" max="500"  :placeholder="$t('public.pleaseEnter')" @blur="blurMar('btnBotMar')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip32')" class="padding_bottom" v-show="!form.scheduleEnable">
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip28')}}</el-col>
              <el-col :span="16">
                <div class="btnSty">
                  <span v-for="(icon,index) in icons" class="iconfont" @click= "choseMobileIcon(index)" :class="[cssStyle.chatboxMobileIconType === index + 1 ? 'span-back' : '', icon]"></span>
                </div>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip29')}}</el-col>
              <el-col :span="16">
                <el-select size="mini" v-model="cssStyle.chatButtonMobileLocation">
                  <el-option
                    v-for="item in btnMobileOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
            <el-row class="config" v-show="cssStyle.chatButtonMobileLocation === 'circle-right' || cssStyle.chatButtonMobileLocation === 'circle-left'">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip30')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatButtonMobileSideMargin" type="number" min="0" :placeholder="$t('public.pleaseEnter')" max="999"  size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="config" v-show="cssStyle.chatButtonMobileLocation === 'circle-right' || cssStyle.chatButtonMobileLocation === 'circle-left'">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip31')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.chatButtonMobileBottomMargin" type="number" min="0" max="500"  :placeholder="$t('public.pleaseEnter')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.pixel')}}</template>
                </el-input>
              </el-col>
            </el-row>
            <el-row class="config" v-show="cssStyle.chatButtonMobileLocation === 'bottom'">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip33')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.onlineMobileText" size="mini"></el-input>
              </el-col>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip34')" class="padding_bottom" v-show="changeWindow === 'common'">
            <template slot="questionSlot">
              <div class="questionToolTip">
                <el-tooltip class="item" effect="dark" popper-class="reportTip" placement="right" style="opacity: 1;">
                  <div slot="content">
                    <img src="../../../../../../assets/img/config/tipsImg.png" alt="" style="width: 220px; opacity: 1">
                  </div>
                  <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
                </el-tooltip>
              </div>
            </template>

            <el-row class="config">
              <el-col :span="24">
                <el-input style="width: 95%" size="mini" type="textarea" :maxlength="60" v-model="cssStyle.advConfig.floatAdv" :placeholder="$t('public.pleaseEnter')"></el-input>
              </el-col>
              <span class="desc" style="margin-bottom: 10px; display: inline-block">{{$t('configLazyLoad.channel.webStyleTip35')}}</span>
            </el-row>
          </affix>

          <affix :label="$t('configLazyLoad.channel.webStyleTip36')" class="padding_bottom">
            <template slot="questionSlot">
              <div class="questionToolTip">
                <el-tooltip class="item" effect="dark" popper-class="reportTip" placement="right" style="opacity: 1;">
                  <div slot="content">
                    <img src="../../../../../../assets/img/config/advMsg.png" alt="" style="width: 220px; opacity: 1">
                  </div>
                  <span class="tip"><i class="iconfont icon-tixingweizhi"></i></span>
                </el-tooltip>
              </div>
            </template>

            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip37')}}</el-col>
              <el-col :span="16">
                <el-radio class="radio" v-model="cssStyle.advConfig.advScroll" label="scrollX">{{$t('configLazyLoad.channel.horiDirec')}}</el-radio>
                <el-radio class="radio" v-model="cssStyle.advConfig.advScroll" label="scrollY">{{$t('configLazyLoad.channel.vertiDirec')}}</el-radio>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip38')}}</el-col>
              <el-col :span="16">
                <el-input v-model.trim="cssStyle.advConfig.advScrollTime" type="number" min="0" max="10"  :placeholder="$t('public.pleaseEnter')" @blur="blurMar('scrollTime')" size="mini">
                  <template slot="append">{{$t('configLazyLoad.channel.second')}}</template>
                </el-input>
                <p class="desc">{{$t('configLazyLoad.channel.webStyleTip39')}}</p>
              </el-col>
            </el-row>
            <el-row class="config">
              <el-col :span="24">{{$t('configLazyLoad.channel.webStyleTip40')}}</el-col>
              <el-col class="desc" :span="17">{{$t('configLazyLoad.channel.webStyleTip41', {num: cssStyle.advConfig.advContent.length})}}</el-col>
              <el-col :span="7">
                <div>
                  <span class="btn-span" @click="showAdvList">{{$t('public.add')}}</span>
                  <span class="btn-span btnDel" @click="delAllAdv">{{$t('configLazyLoad.channel.webStyleTip42')}}</span>
                </div>
              </el-col>
            </el-row>
            <el-row class="config advertisingLi" v-show="cssStyle.advConfig.advContent.length" v-for="(item, index) in cssStyle.advConfig.advContent">
              <el-col :span="17" v-show="item">{{index + 1}} : {{item.advTitle}}</el-col>
              <el-col :span="7">
                <el-switch
                  style="display: inline-block"
                  v-model="item.enable"
                  active-color="#459ae9"
                  inactive-color="#ff6b6b">
                </el-switch>
                <span class="btn-span" @click="editAdvItem(index)">{{$t('public.edit2')}}</span>
                <span class="btn-span btnDel" @click="delAdvItem(index)">{{$t('public.delete')}}</span>
              </el-col>
            </el-row>
            <div v-if="showAdvEdit">
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip43')}}</el-col>
                <el-col :span="16">
                  <el-input v-model.trim="addAdvObj.advTitle" :maxlength="10" :placeholder="$t('public.pleaseEnter')" size="mini"></el-input>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip44')}}</el-col>
                <el-col :span="16">
                  <el-input v-model.trim="addAdvObj.advUrl" :placeholder="$t('public.pleaseEnter')" size="mini"></el-input>
                </el-col>
              </el-row>
              <el-row class="config">
                <el-col :span="8">{{$t('configLazyLoad.channel.webStyleTip45')}}</el-col>
                <el-col class="area_link" v-for="(item, index) in addAdvObj.advArea" :span="14" :offset="index === 0 ? 0 : 8">
                  <area-linkage
                    class="fl"
                    :onlyProvinceAndCity="onlyProvinceAndCity"
                    :provinceName="'province'"
                    :provinceValue="item.province"
                    :cityName="'city'"
                    :cityValue="item.city"
                    :advAreaObj="item"
                    :currentIndex="index"
                    @valueChange="handleAreaLinkageChange">
                  </area-linkage>
                  <el-button v-if="index === 0" type="text" @click.stop="addAreaItem" size="mini" class="color el-icon-plus"></el-button>
                  <el-button v-else class="el-icon-minus btnDel" type="text" size="mini" @click.prevent="removeAreaItem(index)"></el-button>
                </el-col>
              </el-row>
              <div class="add_adv_btn fr">
                <el-button v-show="isAddAdv" type="primary" size="mini" @click="addAdvItem">{{$t('intelligentQualityCheck.intelConfirm')}}</el-button>
                <el-button v-show="!isAddAdv" type="primary" size="mini" @click="saveEditAdvItem">{{$t('configLazyLoad.channel.webStyleTip46')}}</el-button>
                <el-button size="mini" @click="cancelAdv">{{$t('public.cancel')}}</el-button>
              </div>
            </div>
          </affix>
        </el-col>
        <div class="save_config">
          <el-button type="primary" @click="saveConfig" class="primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
        </div>
      </div>

      <div class="right_style">
        <div class="grid-content bg-purple">
          <p class="chatbox_des">{{$t('configLazyLoad.channel.previewEffe')}}</p>
          <p class="desc">{{$t('configLazyLoad.channel.previewTip')}}</p>
          <div class="box" id="viewBoxWidth">
            <div id="showImView" class="show" :style="style">
              <div class="header" :style="{background: cssStyle.styleColor}">
                <div  class="fll">
                  <div class="logo_box">
                    <img v-show="cssStyle.companyLogo" :src="cssStyle.companyLogo" alt="">
                  </div>
                  <p :title="cssStyle.companyName">{{cssStyle.companyName}}</p>
                </div>
                <div class="fr">
                  <span :class="['iconfont', cssStyle.defaultMute ? 'icon-guan3 ':'icon-yinliang' ]"></span>
                  <span class="iconfont icon-zuixiaohua1"></span>
                  <span class="iconfont icon-guanbi1" v-show="cssStyle.showCloseButton"></span>
                </div>
              </div>
              <div v-if="changeWindow === 'common' && cssStyle.advConfig && (cssStyle.advConfig.advType === '3' || cssStyle.advConfig.advType === '2')" class="davLeft">
                <img v-show="cssStyle.advConfig.uploadLeftAdvtImg" :src="cssStyle.advConfig.uploadLeftAdvtImg" alt="">
              </div>
              <div class="advCenter fl">
                <div class="float_adv" v-show="cssStyle.advConfig && cssStyle.advConfig.floatAdv && changeWindow === 'common'" :style="{borderColor: cssStyle.styleColor}">
                  <span class="float_icon float_icon_left" :style="{backgroundColor: cssStyle.styleColor}"></span>
                  <span class="float_icon float_icon_right" :style="{backgroundColor: cssStyle.styleColor}"></span>
                  <div class="float_adv_content">{{cssStyle.advConfig.floatAdv}}</div>
                </div>
                <div class="content" :style="{width: changeWindow === 'common' ? '240px' : '225px'}">
                  <p>{{$t('configLazyLoad.channel.webStyleTip47')}}</p>
                  <div>
                    <img class="avatar" src="../../../../.././../assets/img/config/avatar.png" alt="">
                    <p class="fl">{{$t('configLazyLoad.channel.webStyleTip48')}}</p>
                  </div>
                  <p class="fr" :style="{background: cssStyle.styleColor}"><span :style="{borderLeft: '5px solid' + cssStyle.styleColor}"></span>{{$t('configLazyLoad.channel.webStyleTip49')}}</p>
                </div>
                <div class="footer clearfix">
                  <span class="iconfont icon-biaoqing"></span>
                  <div v-show="cssStyle.advConfig.advContent.length !== 0 ">
                    <a href="javascript:;" class="scrollAdv" v-text="cssStyle.advConfig.advContent[0] ? cssStyle.advConfig.advContent[0].advTitle : ''"></a>
                  </div>
                  <span class="comit" :style="{background: cssStyle.styleColor}">{{$t('sms.smsTempSubmit')}}</span>
                </div>
              </div>
              <div v-if="changeWindow === 'common' && cssStyle.advConfig && (cssStyle.advConfig.advType === '1' || cssStyle.advConfig.advType === '2')" class="davRight">
                <img v-show="cssStyle.advConfig.uploadRightAdvtImg" :src="cssStyle.advConfig.uploadRightAdvtImg" alt="">
              </div>
            </div>
            <!-- 按钮展示位置和样式 -->
            <div class="kf bottom_btn" :style="btnStyle" v-show="place === 'bottom' && showBtn && !form.scheduleEnable">
              <span class="iconfont" :class="btnIcon"></span>
              <span>{{cssStyle.onlineText}}</span>
            </div>
            <div class="kf side_btn" :style="btnStyle" v-show="place === 'side' && showBtn && !form.scheduleEnable">
              <span class="iconfont" :class="btnIcon"></span>
              <span>{{cssStyle.onlineText}}</span>
            </div>
            <div class="kf circle_btn" :style="btnStyle" v-show="place === 'circle' && showBtn && !form.scheduleEnable">
              <span class="iconfont" :class="btnIcon" :style="{'background': cssStyle.styleColor}"></span>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
  import affix from '../../../../../ui-modules/affix/Affix.vue'
  import AreaLinkage from '@/components/ui-modules/area-linkage/AreaLinkageAdv.vue'
  import {uploadTo7moorlogoImgDomain, uploadTo7moorImDomain} from '@/utils/qiniuUtils'
  import {getCurrentDate, deepClone, filterXSS} from '@/utils/m7Utils'
  import * as uuid from 'uuid'
  import skillGroupWebchat from '../../base/chooseSkillGroupWebchat.vue'
  import autoPopupTimeSet from '../../base/autoPopupTimeSet.vue'
  import bus from '@/store/eventBus'
  import Affix from '@/components/ui-modules/affix/Affix'
  import welcomeMsgEditBox from '@/components/business-modules/config/channelConfig/base/welcomeMsgEditBox.vue'
  import styleConfig from './styleConfig'
  export default {
    name: 'styleConfig',
    filters: {
      filterName (obj) {
        try {
          return JSON.parse(obj).formName || ''
        } catch (err) {
          return obj.formName || ''
        }
      }
    },
    data () {
      return {
        isShowBtnText: true,    //  是否可设置在线咨询按钮文案（按钮样式为圆形时，不可设置）
        currentAdvIndex: 0, // 当前广告索引
        onlyProvinceAndCity: true, // 仅展示省市
        isAddAdv: false,        //  是否在进行添加广告操作
        showAdvEdit: false,     //  展示广告编辑框
//        cssStyle只用来存放访客端页面UI
        cssStyle: {
          welcome: '',                  // 客服欢迎词
          showAgentName: false,         // 是否显示座席昵称
          openChatWay: 'normal',         // 是否显示座席昵称
          onlineText: this.$t('configLazyLoad.channel.consultAgent'),       //  在线咨询按钮文案
          onlineMobileText: this.$t('configLazyLoad.channel.consultAgent'), // 在线咨询移动端按钮文案
          chatboxSideMargin: '18',      //  对话框位置水平方向偏移量
          chatboxSideMarginY: '0',      //  对话框位置垂直方向偏移量
          chatboxLocation: 'right',     //  对话框位置水平方向位置（左，右，中）
          chatboxLocationY: 'bottom',   // 垂直对话框的方向
          chatButtonSideMargin: '18',   //  在线咨询按钮侧边距
          chatButtonBottomMargin: '18', //  在线咨询按钮底边距
          chatButtonMobileSideMargin: '18',   //  在线咨询移动端按钮侧边距
          chatButtonMobileBottomMargin: '18', //  在线咨询移动端按钮底边距
          chatboxHeight: '500',         //  对话框高度
          chatboxWidth: '355',          //  对话框宽度
          companyLogo: '',              //  企业logo地址
          chatboxIconType: 1,           //  在线咨询按钮默认图标样式
          chatboxMobileIconType: 1,     //  在线咨询移动端按钮默认图标样式
          styleColor: '#19CAA6',        //  在线咨询按钮预览背景色
          companyLogoTest: '',
          systemMsgLogo: '',            //  在线咨询系统消息头像
          chatButtonLocation: 'bottom-right',       //  在线咨询按钮位置
          chatButtonMobileLocation: 'circle-right',    //  在线咨询移动端按钮位置
          companyName: '',              //  企业简称
          chatMarginTop: '0',           //  聊天窗口距屏幕顶部距离
          attachName: [],
          advConfig: { // 广告设置
            advType: '1',  // 广告窗口的类型
            windowType: '',
            floatAdv: '',  // 浮动广告语
            advScroll: 'scrollX',   // 广告滚动的方向
            advScrollTime: 3,        // 广告滚动时间
            uploadLeftAdvtImg: '',
            uploadLeftAdvtUrl: '',
            uploadRightAdvtImg: '',
            uploadRightAdvtUrl: '',
            advContent: []
          },
          showCloseButton: true,  // 是否显示关闭按钮
          defaultMute: true // 默认静音
        },
        // 初始化列cssStyle，相当于重置
        intiCssStyle: {
          welcome: '',
          showAgentName: false,
          openChatWay: 'normal',
          onlineText: this.$t('configLazyLoad.channel.consultAgent'),
          onlineMobileText: this.$t('configLazyLoad.channel.consultAgent'), // 在线咨询移动端按钮文案
          chatboxSideMargin: '18',
          chatboxSideMarginY: '0',
          chatboxLocation: 'right',
          chatboxLocationY: 'bottom',
          chatButtonSideMargin: '18',
          chatButtonBottomMargin: '18',
          chatButtonMobileSideMargin: '18',   //  在线咨询移动端按钮侧边距
          chatButtonMobileBottomMargin: '18', //  在线咨询移动端按钮底边距
          chatboxHeight: '500',
          chatboxWidth: '355',
          companyLogoTest: '',
          companyLogo: '',
          systemMsgLogo: '',            //  在线咨询系统消息头像
          chatboxIconType: 1,
          chatboxMobileIconType: 1,     //  在线咨询移动端按钮默认图标样式
          styleColor: '#19CAA6',
          chatButtonLocation: 'bottom-right',
          chatButtonMobileLocation: 'circle-right',    //  在线咨询移动端按钮位置
          companyName: '',
          chatMarginTop: '0',           //  聊天窗口距屏幕顶部距离
          attachName: [],
          advConfig: { // 广告设置
            advType: '1',  // 广告窗口的类型
            floatAdv: '',  // 浮动广告语
            windowType: '',  // 普通版还是纯洁
            advScroll: 'scrollX',   // 广告滚动的方向
            advScrollTime: 3,        // 广告滚动时间
            uploadLeftAdvtImg: '',
            uploadLeftAdvtUrl: '',
            uploadRightAdvtImg: '',
            uploadRightAdvtUrl: '',
            advContent: []
          },
          showCloseButton: true,
          defaultMute: false
        },
        addAdvObj: {            //  添加广告地区初始值
          advTitle: '',
          advUrl: '',
          enable: true,
          advArea: [{
            province: '',
            city: ''
          }]
        },
        btnIcon: 'icon-zhudongyaoqing',     //  主动邀请按钮icon
        optionsX: [{                        //  对话框水平位置列表
          label: this.$t('configLazyLoad.channel.lookRight'),
          value: 'right'
        }, {
          label: this.$t('configLazyLoad.channel.lookMiddle'),
          value: 'center'
        }, {
          label: this.$t('configLazyLoad.channel.lookLeft'),
          value: 'left'
        }],
        optionsY: [{                        //  对话框垂直位置列表
          label: this.$t('configLazyLoad.channel.lookUp'),
          value: 'top'
        }, {
          label: this.$t('configLazyLoad.channel.lookMiddle'),
          value: 'center'
        }, {
          label: this.$t('configLazyLoad.channel.lookDown'),
          value: 'bottom'
        }],
        btnOptions: [{                      //  在线咨询按钮位置列表
          label: this.$t('configLazyLoad.channel.bottomRightButton'),
          value: 'bottom-right'
        }, {
          label: this.$t('configLazyLoad.channel.bottomLeftButton'),
          value: 'bottom-left'
        }, {
          label: this.$t('configLazyLoad.channel.sideRightButton'),
          value: 'side-right'
        }, {
          label: this.$t('configLazyLoad.channel.sideLeftButton'),
          value: 'side-left'
        }, {
          label: this.$t('configLazyLoad.channel.circleRightButton'),
          value: 'circle-right'
        }, {
          label: this.$t('configLazyLoad.channel.circleLeftButton'),
          value: 'circle-left'
        }],
        btnMobileOptions: [{
          label: this.$t('configLazyLoad.channel.circleRightButton'),
          value: 'circle-right'
        }, {
          label: this.$t('configLazyLoad.channel.circleLeftButton'),
          value: 'circle-left'
        }, {
          label: this.$t('configLazyLoad.channel.circleFloatButton'),
          value: 'levitate'
        }, {
          label: this.$t('configLazyLoad.channel.bottomButton'),
          value: 'bottom'
        }],
        showBack: 0,         // 对话框颜色回显index
        progressUi: {       //  进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
        systemMsgLogoUi: {       //  系统消息头像上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
        welcomeLogoUi: {       //  智能引导开头语消息头像，上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
        lfAdvtLogoUi: {       //  智能引导开头语消息头像，上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
        rtAdvtLogoUi: {       //  智能引导开头语消息头像，上传进度条
          show: false,
          percent: 0,
          type: 'success',
          fileName: '',
          disabled: false
        },
        placeholderArr: [       //  客服欢迎词占位符
          {
            content: this.$t('configLazyLoad.channel.nickName'),
            data: 'nickName'
          }
        ],
        m7uploaders: [],
        dialogVisible: false,
        isEdit: [true],
        value: '',
        turnHumanOptions: [],
        form: {
          webDomain: '',
          name: '',
          pageTitle: '',
          robot: '',
          webchat_csr: true,
          backJsEnable: false,
          isTurnHumanSessionForm: false,
          ToPeer: [],
          userBehaviorReplay: false,
          autoInvite: '0',
          autoInviteTerminal: ['pc', 'mobile'],
          autoInvitePC: true,
          autoInviteMobile: true,
          autoInviteData: {
            usuallyTime: [],
            special: false,
            specialTime: []
          },
          openStayTime: '10',
          closeStayTime: '10',
          robotType: '',
          isOpenWeight: false,    // 是否启用多技能组智能分流
          ToPeerWeight: [],    // 是否启用多技能组智能分流技能组权重数组
          webchat_showTypeName: true,
          autoShowInviteType: '1',
          scheduleEnable: false,
          robotAssistId: '',
          turnHumanSessionFormId: '',
          showTransferBtn: true,  //  转人工按钮是否显示
          openTriggerWord: false,  //  是否开启触发词命中转人工
          convert_words: '',  //  转人工触发词
          convertManualAfterMsgSwitch: false,
          convertManualAfterMsg: '',
          cyclic_welcome: false,
          priorityReception: false,   // 是否启用优先接待
          // 多级欢迎语配置
          cyclic_welcome_config: {
            url: '',
            agent: '',
            welcome: []
          },
          queueKeep: false, // 是否启用排队保持
          queueKeepTime: 5
        },
        todoRandom: 0,

        // 初始化列表用，相当于重置
        intiForm: {
          webDomain: '',
          name: '',
          pageTitle: this.$t('configLazyLoad.channel.consultAgent'),
          robot: '',
          webchat_csr: true,
          backJsEnable: false,
          isTurnHumanSessionForm: false,
          ToPeer: [],
          userBehaviorReplay: false,
          autoShowInviteType: '1',
          autoInvite: '0',
          autoInviteTerminal: ['pc', 'mobile'],
          autoInvitePC: true,
          autoInviteMobile: true,
          autoInviteData: {
            usuallyTime: [],
            special: false,
            specialTime: []
          },
          openStayTime: '10',
          closeStayTime: '10',
          robotType: '',
          isOpenWeight: false,    // 是否启用多技能组智能分流
          ToPeerWeight: [],    // 是否启用多技能组智能分流技能组权重数组
          webchat_showTypeName: true,
          robotAssistId: '',
          turnHumanSessionFormId: '',
          scheduleEnable: false,
          showTransferBtn: true,  //  转人工按钮是否显示
          openTriggerWord: false,  //  是否开启触发词命中转人工
          convert_words: '',  //  转人工触发词
          convertManualAfterMsgSwitch: false,
          convertManualAfterMsg: '',
          cyclic_welcome: false,
          priorityReception: false,   // 是否启用优先接待
          // 多级欢迎语配置
          cyclic_welcome_config: {
            url: '',
            agent: '',
            welcome: []
          },
          queueKeep: false,
          queueKeepTime: 5,
          queueKeepTips: false
        },
        changeWindow: 'pure',
        peerOptions: [],
        dealSkill: {
          id: '',
          name: '',
          status: 'enable'
        },
        rules: {
          companyName: [
            { required: true, message: this.$t('validate.required'), trigger: 'blur' }
          ]
        },
        showPriorityReception: false,
        robotConfig: [],
        aiRobots: [],
        isEditWinStyle: false,
        colors: ['#19CAA6', '#00b45f', '#b50e03', '#f49300', '#9ec100', '#00cccd', '#5b799a', '#871F78'],
        icons: ['icon-webchat1', 'icon-webchat', 'icon-webchat3', 'icon-webchat2', 'icon-webchat5', 'icon-webchat6', 'icon-webchat7', 'icon-webchat8', 'icon-webchat4', 'icon-webchat9', 'icon-webchat11', 'icon-webchat10']
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.initUploadImageFile()
        this.initUploadRightAdvtImg()
        this.initUploadLeftAdvtImg()
        if (this.changeWindow === 'common') {
          let showImView = document.getElementById('showImView')
//          style['transform'] = 'transform: scale(0.8)'
          showImView.style.transform = 'transform: scale(0.8)'
          if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '2') {
            showImView.style.width = '464px'
          } else if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '1' || this.cssStyle.advConfig.advType === '3') {
            showImView.style.width = '364px'
          } else if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '4') {
            showImView.style.width = '264px'
          }
        }
        this.showPriorityReceptionFun()
      })
      bus.$on('autoInviteData', (msg) => {      //  修改工作时间||特殊节假日
        this.$set(this.form, 'autoInviteData', msg.data)
      })
    },
    props: {
      basicData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      scheduleEnable: Boolean
    },
    watch: {
      // 监测传过来的渲染信息
      basicData: {
        handler: function (val) {
          this.basicSetInti(deepClone(val))
          this.inti(deepClone(val))
        },
        deep: true
      },
      changeWindow (cur) {
        if (this.cssStyle.advConfig) {
          this.cssStyle.advConfig.windowType = this.changeWindow || 'pure'
        }
        this.$emit('changeWin', {changeWindow: this.changeWindow})
      }
    },
    computed: {
      configType () {
        let paths = this.$route.path.split('/')
        return paths[2]
      },
      // 判断按钮是否超出可视框
      showBtn () {
        var btnSideMar = document.getElementsByClassName('bottom_btn')[0]
        var btnBotMar = document.getElementsByClassName('side_btn')[0]
        if (!btnSideMar || !btnBotMar) {
          return true
        }
        if (this.place === 'bottom' && 420 - btnSideMar.clientWidth > this.cssStyle.chatButtonSideMargin) {
          return true
        } else if (this.place === 'side' && 500 - btnBotMar.clientHeight > this.cssStyle.chatButtonBottomMargin) {
          return true
        } else if (this.place === 'circle' && 470 - 0 > this.cssStyle.chatButtonBottomMargin && 390 - 0 > this.cssStyle.chatButtonSideMargin) {
          return true
        }
        return false
      },
      // 判断聊天框是否超出可视区
      boxShow () {
        return 820 - 250 > this.cssStyle.chatboxSideMargin
      },
      // 计算聊天框的边框颜色和侧边距
      style () {
        let style = {}
        if (this.changeWindow === 'pure') {
          style[this.cssStyle.chatboxLocation] = this.cssStyle.chatboxSideMargin + 'px'
          style[this.cssStyle.chatboxLocationY] = this.cssStyle.chatboxSideMarginY + 'px'
        }
        if (this.cssStyle.chatboxLocation === 'center' && this.changeWindow === 'pure') {
          style['left'] = '50%'
          style['transform'] = 'translateX(-50%)'
        }
        if (this.cssStyle.chatboxLocationY === 'center' && this.changeWindow === 'pure') {
          style['bottom'] = '50%'
          style['transform'] = 'translateY(50%)'
        }
        if (this.cssStyle.chatboxLocation === 'center' && this.cssStyle.chatboxLocationY === 'center' && this.changeWindow === 'pure') {
          style['transform'] = 'translate(-50%, 50%)'
        }
        if (this.changeWindow === 'common') {
          if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '2') {
            style['width'] = '464px'
          } else if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '1' || this.cssStyle.advConfig.advType === '3') {
            style['width'] = '364px'
          } else if (this.cssStyle.advConfig && this.cssStyle.advConfig.advType === '4') {
            style['width'] = '264px'
          }
        }
        return style
      },
      // 计算按钮的展示样式（侧边，底边，圆形）
      place () {
        let address = this.cssStyle.chatButtonLocation
        return address.includes('bottom') ? 'bottom' : address.includes('side') ? 'side' : 'circle'
      },
      // 计算按钮的样式
      btnStyle () {
        let btnStyle1 = {}
        btnStyle1.background = this.cssStyle.styleColor
        let posit = this.cssStyle.chatButtonLocation.split('-')
        this.isShowBtnText = true
        if (posit[0] === 'bottom') {
          btnStyle1[posit[1]] = this.cssStyle.chatButtonSideMargin + 'px'
        } else if (posit[0] === 'side') {
          btnStyle1[posit[1]] = 0
          btnStyle1['bottom'] = this.cssStyle.chatButtonBottomMargin + 'px'
          if (posit[1] === 'left') {
            btnStyle1.borderRadius = '0 3px 3px 0'
          } else {
            btnStyle1.borderRadius = '3px 0 0 3px'
          }
        } else {
          btnStyle1[posit[1]] = this.cssStyle.chatButtonSideMargin + 'px'
          btnStyle1['bottom'] = this.cssStyle.chatButtonBottomMargin + 'px'
          btnStyle1.background = 'none'
          this.isShowBtnText = false
        }
        return btnStyle1
      },
      sessionFormName () {
        return
      }
    },
    components: {
      affix,
      AreaLinkage,
      skillGroupWebchat,
      autoPopupTimeSet,
      bus,
      styleConfig,
      welcomeMsgEditBox,
      Affix
    },
    methods: {
      addWelcome () {
        if (this.form.cyclic_welcome_config.welcome.length > 9) {
          this.$message.warning(this.$t('configLazyLoad.channel.webStyleTip50'))
          return
        }
        let welcome = {
          id: uuid.v1(),
          content: '',
          delay: ''
        }
        this.form.cyclic_welcome_config.welcome.push(welcome)
      },
      deleteWelcome (index) {
        this.form.cyclic_welcome_config.welcome.splice(index, 1)
      },
      addPlaceholder (data) {
        this.cssStyle.welcome += '{' + data + '}'
      },
      styleColorBlur () {
        let reg = /^#([0-9a-fA-F]{6})$/
        if (!reg.test(this.cssStyle.styleColor)) {
          this.$message.error(this.$t('configLazyLoad.channel.dockingError6'))
          this.cssStyle.styleColor = this.colors[0]
          this.showBack = 0
          return
        }
        if (this.colors.indexOf(this.cssStyle.styleColor) < 0) {
          this.showBack = -1
        }
      },
      blurMar (eleMargin) {
        if (eleMargin === 'boxSideMar' && ((this.cssStyle.chatboxSideMargin <= 0 && this.cssStyle.chatboxSideMargin + '' !== '0') || this.cssStyle.chatboxSideMargin > 990)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip51'))
          this.cssStyle.chatboxSideMargin = '18'
        } else if (eleMargin === 'btnSideMar' && ((this.cssStyle.chatButtonSideMargin <= 0 && this.cssStyle.chatButtonSideMargin + '' !== '0') || this.cssStyle.chatButtonSideMargin > 999)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip52'))
          this.cssStyle.chatButtonSideMargin = '18'
        } else if (eleMargin === 'btnBotMar' && ((this.cssStyle.chatButtonBottomMargin <= 0 && this.cssStyle.chatButtonBottomMargin + '' !== '0') || this.cssStyle.chatButtonBottomMargin > 500)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip53'))
          this.cssStyle.chatButtonBottomMargin = '18'
        } else if (eleMargin === 'boxSideMarY' && ((this.cssStyle.chatboxSideMarginY <= 0 && this.cssStyle.chatboxSideMarginY + '' !== '0') || this.cssStyle.chatboxSideMarginY > 200)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip54'))
          this.cssStyle.chatboxSideMarginY = '0'
        } else if (eleMargin === 'boxWidth' && ((this.cssStyle.chatboxWidth <= 300 && this.cssStyle.chatboxWidth + '' !== '300') || this.cssStyle.chatboxWidth > 600)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip55'))
          this.cssStyle.chatboxWidth = '355'
        } else if (eleMargin === 'boxHeigt' && ((this.cssStyle.chatboxHeight <= 450 && this.cssStyle.chatboxHeight + '' !== '450') || this.cssStyle.chatboxHeight > 600)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip56'))
          this.cssStyle.chatboxHeight = '500'
        } else if (eleMargin === 'scrollTime' && this.cssStyle.advConfig && ((this.cssStyle.advConfig.advScrollTime < 0 && this.cssStyle.advConfig.advScrollTime + '' !== '10') || this.cssStyle.advConfig.advScrollTime > 10)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip57'))
          this.cssStyle.advConfig.advScrollTime = '3'
        } else if (eleMargin === 'chatMarginTop' && this.cssStyle.chatMarginTop && (this.cssStyle.chatMarginTop < 0 || this.cssStyle.chatMarginTop > 200)) {
          this.$message.error(this.$t('configLazyLoad.channel.webStyleTip58'))
          this.cssStyle.chatMarginTop = '0'
        }
      },
      // 初始化样式
      inti (val) {
        this.cssStyle = deepClone(this.intiCssStyle)
        if (JSON.stringify(val) === '{}') {
          this.showBack = 0
          this.btnIcon = this.icons[0]
        } else {
          this.showAdvEdit = false
          if (!val.cssStyle.advConfig) {
            this.cssStyle.advConfig = deepClone(this.intiCssStyle.advConfig)
          }
          for (let i in this.cssStyle) {
            if (i === 'advConfig' && val.cssStyle[i] === undefined && val[i] === undefined || val[i] === '') {
              continue
            }
            this.cssStyle[i] = val.cssStyle[i] === undefined ? val[i] || '' : val.cssStyle[i]
          }
          if (!val.chatboxLocationY) {
            this.cssStyle.chatboxLocationY = this.intiCssStyle.chatboxLocationY
          }
          if (!val.chatboxSideMarginY) {
            this.cssStyle.chatboxSideMarginY = this.intiCssStyle.chatboxSideMarginY
          }
          if (!val.chatboxWidth) {
            this.cssStyle.chatboxWidth = this.intiCssStyle.chatboxWidth
          }
          if (!val.chatboxHeight) {
            this.cssStyle.chatboxHeight = this.intiCssStyle.chatboxHeight
          }
          if (!val.chatButtonMobileLocation) {
            this.cssStyle.chatButtonMobileLocation = this.intiCssStyle.chatButtonMobileLocation
          }
          if (!val.chatButtonMobileSideMargin) {
            this.cssStyle.chatButtonMobileSideMargin = this.intiCssStyle.chatButtonMobileSideMargin
          }
          if (!val.chatboxMobileIconType) {
            this.cssStyle.chatboxMobileIconType = this.intiCssStyle.chatboxMobileIconType
          }
          if (!val.chatButtonMobileBottomMargin) {
            this.cssStyle.chatButtonMobileBottomMargin = this.intiCssStyle.chatButtonMobileBottomMargin
          }
          if (val.onlineMobileText === undefined) {
            this.cssStyle.onlineMobileText = this.intiCssStyle.onlineMobileText
          }
          if (!val.chatMarginTop) {
            this.cssStyle.chatMarginTop = this.intiCssStyle.chatMarginTop
          }
          if (!val.openChatWay) {
            this.cssStyle.openChatWay = this.intiCssStyle.openChatWay
          }
          this.cssStyle.advConfig.windowType = this.changeWindow
          this.cssStyle.styleColor = '#' + this.cssStyle.styleColor
          this.cssStyle.showAgentName = val.showAgentName
          this.cssStyle.welcome = val.welcome
          this.cssStyle.showCloseButton = val.showCloseButton
          if (val.showCloseButton === undefined) {
            this.cssStyle.showCloseButton = true
          }
          if (!val.defaultMute) {
            this.cssStyle.defaultMute = this.intiCssStyle.defaultMute;
          }
          // 提交的时候判断logo是否变化，不变不传
          this.cssStyle.companyLogoTest = this.cssStyle.companyLogo
          this.btnIcon = this.icons[val.cssStyle.chatboxIconType - 1]
          this.showBack = this.colors.indexOf(this.cssStyle.styleColor) < 0 ? -1 : this.colors.indexOf(this.cssStyle.styleColor)
        }
      },
      // color插件选择时触发
      colorPickChange (v) {
        if (this.colors.indexOf(v) < 0 && v) {
          this.showBack = -1
        }
        if (v === null) {
          this.$message.error(this.$t('configLazyLoad.channel.dockingError5'))
          this.cssStyle.styleColor = '#19CAA6'
          this.showBack = 0
          return
        }
      },
      // 上传图片初始化的事件
      initUploadImageFile () {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {}
        let beforeUpload = function (up, file) {
          self.progressUi.show = true
          self.progressUi.percent = 0
        }
        let beforeUploadWelLogo = function () {
          self.welcomeLogoUi.show = true
          self.welcomeLogoUi.percent = 0
        }
        let uploadProgressWelLogo = function (up, file) {
          self.welcomeLogoUi.percent = file.percent
        }
        let uploadCompleteWelLogo = function () {
          self.welcomeLogoUi.show = false
        }
        let uploadProgress = function (up, file) {
          self.progressUi.percent = file.percent
        }
        let uploadComplete = function (up, file) {
          self.progressUi.show = false
        }
        let beforeUploadSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = true
          self.systemMsgLogoUi.percent = 0
        }
        let upProgressSysLogo = function (up, file) {
          self.systemMsgLogoUi.percent = file.percent
        }
        let upCompleteSysLogo = function (up, file) {
          self.systemMsgLogoUi.show = false
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          self.cssStyle.companyLogo = sourceLink
          // 对上传的图片名字进行编码
          self.cssStyle.attachName = []
          self.cssStyle.attachName.push(encodeURIComponent(file.name))
          self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
        }
        let welcomeFileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          self.form.cyclic_welcome_config.url = sourceLink
          self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
        }
        let systemLogouploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          self.cssStyle.systemMsgLogo = sourceLink
          self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
          console.log('uploadError ' + errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,gif,png,jpeg'}
          ]
        }
        this.m7uploaders.push(
          uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadlogoFile', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key)
        )
        this.m7uploaders.push(
          uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadSystemLogo', filters, fileAdded, beforeUploadSysLogo, upProgressSysLogo, upCompleteSysLogo, systemLogouploaded, error, key)
        )
        this.m7uploaders.push(
          uploadTo7moorlogoImgDomain(this.$store.state.session.user._id, 'uploadWelcomeFile', filters, fileAdded, beforeUploadWelLogo, uploadProgressWelLogo, uploadCompleteWelLogo, welcomeFileUploaded, error, key)
        )
      },
      showPriorityReceptionFun () {
        this.$nextTick(() => {
          var skillForm = deepClone(this.$refs.skillGroupForm.$refs.skillForm.model)
          // console.log(skillForm)
          if (!skillForm.isOpenWeight && skillForm.ToPeer.length > 1 && this.form.robot) {
            this.showPriorityReception = true
          } else {
            this.showPriorityReception = false
          }
        })
      },
      // 左侧广告上传
      initUploadLeftAdvtImg () {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {}
        let beforeUpload = function (up, file) {
          self.lfAdvtLogoUi.show = true
          self.lfAdvtLogoUi.percent = 0
        }
        let uploadProgress = function (up, file) {
          self.lfAdvtLogoUi.percent = file.percent
        }
        let uploadComplete = function (up, file) {
          self.lfAdvtLogoUi.show = false
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          if (self.cssStyle.advConfig.uploadLeftAdvtImg !== undefined) {
            self.cssStyle.advConfig.uploadLeftAdvtImg = sourceLink
          } else {
            self.$set(self.cssStyle.advConfig, 'uploadLeftAdvtImg', sourceLink)
          }
          self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
          console.log('uploadError ' + errTip)
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,gif,png,jpeg'}
          ]
        }
        this.m7uploaders.push(
          uploadTo7moorImDomain(this.$store.state.session.user._id, 'uploadLeftAdvtImg', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key)
        )
      },
      // 右侧广告上传
      initUploadRightAdvtImg () {
        let account = this.$store.state.session.user.account
        let self = this
        let fileAdded = function (up, files) {}
        let beforeUpload = function (up, file) {
          self.rtAdvtLogoUi.show = true
          self.rtAdvtLogoUi.percent = 0
        }
        let uploadProgress = function (up, file) {
          self.rtAdvtLogoUi.percent = file.percent
        }
        let uploadComplete = function (up, file) {
          self.rtAdvtLogoUi.show = false
        }
        let fileUploaded = function (up, file, info) {
          let domain = up.getOption('domain')
          let res = JSON.parse(info||'{}')
          let sourceLink = domain + (self.$store.state.isUseQiniu ? res.key : file.fileKey) // 获取上传成功后的文件的Url
          if (!sourceLink) {
            return
          }
          if (self.cssStyle.advConfig.uploadRightAdvtImg !== undefined) {
            self.cssStyle.advConfig.uploadRightAdvtImg = sourceLink
          } else {
            self.$set(self.cssStyle.advConfig, 'uploadRightAdvtImg', sourceLink)
          }
          self.$message.success(self.$t('configLazyLoad.channel.uploadSucc'))
        }
        let error = function (up, err, errTip) {
          if (errTip) {
            self.$message.error(errTip)
          }
        }
        let key = function (up, file) {
          let date = getCurrentDate()
          let today = new Date()
          let time = today.getTime()
          let key = account + '/km/' + date + '/' + time + '/' + uuid.v1() + file.name
          return key
        }
        let filters = {
          mime_types: [
            {title: 'Image files', extensions: 'jpg,gif,png,jpeg'}
          ]
        }
        uploadTo7moorImDomain(this.$store.state.session.user._id, 'uploadRightAdvtImg', filters, fileAdded, beforeUpload, uploadProgress, uploadComplete, fileUploaded, error, key)
      },
      // 选择聊天框颜色触发，通过showbaack渲染选中的颜色
      addBack (index) {
        this.cssStyle.styleColor = this.colors[index]
        this.showBack = index
      },
      // 选择按钮图标的时候触发
      choseIcon (index) {
        this.btnIcon = this.icons[index]
        this.cssStyle.chatboxIconType = index + 1
      },
      // 选择按钮图标的时候触发
      choseMobileIcon (index) {
        this.cssStyle.chatboxMobileIconType = index + 1
      },
      // 添加广告
      showAdvList () {
        this.addAdvObj.advTitle = ''
        this.addAdvObj.advUrl = ''
        this.addAdvObj.enable = true
        this.addAdvObj.advArea = [{province: '', city: ''}]
        this.showAdvEdit = true
        this.isAddAdv = true
      },
      // 选择广告窗口
      chooseWin (index) {
        if (index === '0') {
          this.changeWindow = 'pure'
        } else {
          this.changeWindow = 'common'
          this.cssStyle.advConfig.advType = index
        }
      },
      // 取消添加广告
      cancelAdv () {
        this.showAdvEdit = false
      },
      addAdvItem () {
        if (this.cssStyle.advConfig) {
          if (!this.addAdvObj.advTitle) {
            this.$message.error(this.$t('configLazyLoad.channel.webStyleTip59'))
            return
          } else if (!this.addAdvObj.advUrl) {
            this.$message.error(this.$t('configLazyLoad.channel.webStyleTip60'))
            return
          }
          this.cssStyle.advConfig.advContent.push(deepClone(this.addAdvObj))
          this.showAdvEdit = false
        }
      },
      editAdvItem (index) {
        this.isAddAdv = false
        this.currentAdvIndex = index
        let Obj = this.cssStyle.advConfig.advContent[index]
        for (let key in Obj) {
          this.addAdvObj[key] = deepClone(Obj[key])
        }
        this.showAdvEdit = true
      },
      // 保存编辑的广告
      saveEditAdvItem () {
        if (this.cssStyle.advConfig) {
          if (!this.addAdvObj.advUrl) {
            this.$message.error(this.$t('configLazyLoad.channel.webStyleTip59'))
            return
          } else if (!this.addAdvObj.advTitle) {
            this.$message.error(this.$t('configLazyLoad.channel.webStyleTip60'))
            return
          }
          let obj = this.cssStyle.advConfig.advContent[this.currentAdvIndex]
          for (let key in obj) {
            obj[key] = deepClone(this.addAdvObj[key]) ? deepClone(this.addAdvObj[key]) : ''
          }
          this.showAdvEdit = false
        }
      },
      delAdvItem (index) {
        if (this.cssStyle.advConfig.advContent.length) {
          this.cssStyle.advConfig.advContent.splice(index, 1)
          this.showAdvEdit = false
        }
      },
      delAllAdv () { // 删除所有的滚动广告
        this.showAdvEdit = false
        this.cssStyle.advConfig.advContent = []
      },
      handleAreaLinkageChange (selectObj) {
        for (let key in selectObj) {
          this.addAdvObj.advArea[selectObj.currentIndex][key] = selectObj[key] ? selectObj[key] : ''
        }
      },
      removeAreaItem (index) {
        this.addAdvObj.advArea.splice(index, 1)
      },
      addAreaItem () {
        let areaObj = {province: '', city: ''}
        this.addAdvObj.advArea.push(areaObj)
      },
      saveConfig () {
        if (this.form.cyclic_welcome) {
          for (let i = 0; i < this.form.cyclic_welcome_config.welcome.length; i++) {
            let welcome = this.form.cyclic_welcome_config.welcome[i]
            if (!welcome.content) {
              this.$message(this.$t('configLazyLoad.channel.webStyleTip61'))
              return
            }
            if (!welcome.delay) {
              this.$message(this.$t('configLazyLoad.channel.webStyleTip62'))
              return
            }
            if (welcome.delay && (welcome.delay > 120 || welcome.delay < 1)) {
              this.$message(this.$t('configLazyLoad.channel.webStyleTip63'))
              return
            }
          }
        }
        this.form.name = filterXSS(this.form.name)
        this.form.webDomain = filterXSS(this.form.webDomain)
        if (!this.form.name) {
          this.$message.error(this.$t('configLazyLoad.channel.inputSiteName'))
          return
        }
        if (!this.form.scheduleEnable) {
          //        去掉skillForm中的checked属性
          var skillForm = deepClone(this.$refs.skillGroupForm.$refs.skillForm.model)
          var toPeerNew = []
          skillForm.ToPeer.forEach((item) => {
            toPeerNew.push({id: item.id, name: item.name, status: item.status})
          })
          this.$set(this.form, 'ToPeer', toPeerNew)
          this.$set(this.form, 'ToPeerWeight', skillForm.ToPeerWeight)
          this.$set(this.form, 'isOpenWeight', skillForm.isOpenWeight)
          if (this.form.isOpenWeight) {
            let weightFlag = true
            let weightValidateFlag = true
            if (!this.form.ToPeerWeight.length) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip64'))
              return
            }
            let re = /^[0-9]+$/
            this.form.ToPeerWeight.forEach((item) => {
              if (!re.test(item.weight) || item.weight < 1 || item.weight > 100) {
                weightFlag = false
              }
              if (!item.id) {
                weightValidateFlag = false
              }
              this.$set(item, 'weight', parseInt(item.weight))
            })
            if (!weightFlag) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip65'))
              return
            }
            if (!weightValidateFlag) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip66'))
              return
            }
            this.$set(this.form, 'priorityReception', false)
//            保存的时候启用了权重，就清空掉正常的技能组的数据
            this.$set(this.form, 'ToPeer', [])
          } else {
            if (this.form.ToPeer.length === 0) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip64'))
              return
            }
            // 渠道设置只设置一个技能组的时候，不可设置优先接待
            if (this.form.ToPeer.length === 1) {
              this.form.priorityReception = false
            }
            let skillStatus = false
            let skillVal = true
            this.form.ToPeer.map((item) => {
              if (item.status === 'enable') {
                skillStatus = true
              }
              if (!item.id || !item.name) {
                skillVal = false
              }
            })
            if (!skillStatus) {
              this.$message.error(this.$t('configLazyLoad.channel.AtLeastOne'))
              return
            }
            if (!skillVal) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip66'))
              return
            }
//            保存的时候没有启用权重，就清空掉权重的技能组数据
            this.$set(this.form, 'ToPeerWeight', [])
          }
          this.robotConfig.map((item) => {
            if (this.form.robot === item._id) {
              if (item.Nick) {
                this.form.robotType = item.robotType
              } else {
                this.form.robotType = item.robot_type_new
              }
            }
          })
//          机器人辅助座席，增加assistRobotType参数
          this.aiRobots.map((item) => {
            if (this.form.robotAssistId === item._id) {
              if (this.form.robotAssistId !== '') {
                this.$set(this.form, 'assistRobotType', item.robotType)
              } else {
                this.form.assistRobotType = ''
                this.$set(this.form, 'assistRobotType', '')
              }
            }
          })
          this.form.convertManualAfterMsgSwitch = this.$refs.welcomeMsgBox.welcomeMsgPush
          if (this.$refs.welcomeMsgBox.welcomeMsgPush) {
            let content = this.$refs.welcomeMsgBox.editor.txt.html().replace('<p>', '').replace('</p>', '').replace('<br>', '')
            let text = this.$refs.welcomeMsgBox.editor.txt.text()
            if (!text.trim()) {
              let str = this.$refs.welcomeMsgBox.editor.txt.html()
              text = str.replace(/<[^>]+>/g, '')
            }
            if (!content && !text) {
              this.$message.error(this.$t('configLazyLoad.channel.webStyleTip67'))
              return false
            }
            this.form.convertManualAfterMsg = this.$refs.welcomeMsgBox.editor.txt.html()
          }
          //  如果没有设置机器人，不允许设置机器人优先接待
          if (!this.form.robot) {
            this.form.priorityReception = false
          }
        } else {
          // 开启了日程，保存的时候，要将机器人优先接待，置为false
          this.form.priorityReception = false
        }
        this.form.openStayTime = '' + parseInt(this.form.openStayTime)
        this.form.closeStayTime = '' + parseInt(this.form.closeStayTime)
        if (this.form.autoInvite === '1') {
          if (this.form.autoInviteTerminal.indexOf('pc') > -1) {
            this.form.autoInvitePC = true
          } else {
            this.form.autoInvitePC = false
          }
          if (this.form.autoInviteTerminal.indexOf('mobile') > -1) {
            this.form.autoInviteMobile = true
          } else {
            this.form.autoInviteMobile = false
          }
        }
        this.cssStyle.companyName = filterXSS(this.cssStyle.companyName)
        this.cssStyle.welcome = filterXSS(this.cssStyle.welcome)
        let dataObj = {
          childStyle: {cssStyle: this.cssStyle, boxShow: this.boxShow},
          basicData: this.form
        }
        this.$refs.formWindowStyle.validate((valid) => {
          if (valid) {
            this.$emit('saveConfig', dataObj)
          } else {
            this.currentView = 'styleConfig'
            this.$message.error(this.$t('configLazyLoad.channel.inputName'))
            return
          }
        });
        // this.$emit('saveConfig', dataObj)
      },
      // 初始化基本设置信息
      basicSetInti (val) {
        this.form = deepClone(this.intiForm)
        this.todoRandom = Math.random()
        // this.form = deepClone(this.intiForm)
        if (JSON.stringify(val) === '{}') {
          this.changeWindow = 'pure'
        } else {
          for (let i in this.form) {
            this.form[i] = val[i] === undefined ? this.intiForm[i] : val[i]
          }
          if (!val.convertManualAfterMsgSwitch) {
            this.form.convertManualAfterMsgSwitch = this.form.convertManualAfterMsgSwitch
          }
          if (!val.convertManualAfterMsg) {
            this.form.convertManualAfterMsg = this.form.convertManualAfterMsg
          }
          if (val.advConfig) {
            this.changeWindow = val.advConfig.windowType || 'pure'
          } else {
            this.changeWindow = 'pure'
          }
          if (val.cyclic_welcome_config) {
            this.form.cyclic_welcome_config = deepClone(val.cyclic_welcome_config)
          } else {
            this.form.cyclic_welcome = false
            this.form.cyclic_welcome_config = deepClone(this.intiForm.cyclic_welcome_config)
          }
          // 兼容老数据 对showTransferBtn（转人工按钮是否显示）初始化
          if (typeof this.form.showTransferBtn === undefined) {
            this.$set(this.form, 'showTransferBtn', true)
          }

          // 兼容老数据 是否启用排队保持设置
          if (typeof this.form.queueKeep === undefined) {
            this.$set(this.form, 'queueKeep', false)
          }
          if (typeof this.form.queueKeepTips === undefined) {
            this.$set(this.form, 'queueKeepTips', false)
          }
          if (typeof this.form.queueKeepTime === undefined) {
            this.$set(this.form, 'queueKeepTime', 5)
          }
          // 兼容老数据 openTriggerWord（是否开启触发词命中转人工）初始化
          if (typeof this.form.openTriggerWord === undefined) {
            this.$set(this.form, 'openTriggerWord', false)
          }
          // 兼容老数据 convert_words（转人工触发词）初始化
          if (typeof this.form.convert_words === undefined) {
            this.$set(this.form, 'convert_words', '')
          }
          //  兼容老数据 isOpenWeight（是否启用多技能组智能分流）初始化
          if (!this.form.isOpenWeight) {
            this.$set(this.form, 'isOpenWeight', false)
          }
          //  兼容老数据 ToPeerWeight（是否启用多技能组智能分流）初始化
          if (typeof this.form.ToPeerWeight === undefined) {
            this.$set(this.form, 'ToPeerWeight', [])
          }
          //  兼容老数据 priorityReception （是否启用优先接待）初始化
          if (typeof this.form.priorityReception === undefined) {
            this.$set(this.form, 'priorityReception', false)
          }
          if (this.form.ToPeer.length) {
            this.form.ToPeer.forEach((item) => {
              if (item.status === 'enable') {
                this.$set(item, 'checked', true)
              } else {
                this.$set(item, 'checked', false)
              }
            })
          }
          this.form._id = val._id === undefined ? '' : val._id
          this.form.accessId = val.accessId === undefined ? '' : val.accessId
          // 判断小七是否回显
          if (this.$store.state.isM7RobotOpen === false) {
            if (this.form.robot === '5825a500dfe52d5edc6e36c9') {
              this.form.robot = ''
            }
          }
        }
      },
//      删除上传的头像
      deleteUploadFile (str) {
        switch (str) {
          case 'companyLogo':
            this.$set(this.cssStyle, 'companyLogo', '')
            break
          case 'systemMsgLogo':
            this.$set(this.cssStyle, 'systemMsgLogo', '')
            break
          case 'url':
            this.$set(this.form.cyclic_welcome_config, 'url', '')
            break
          case 'uploadLeftAdvtImg':
            this.$set(this.cssStyle.advConfig, 'uploadLeftAdvtImg', '')
            break
          case 'uploadRightAdvtImg':
            this.$set(this.cssStyle.advConfig, 'uploadRightAdvtImg', '')
            break
        }
      },
      // 失去焦点判断输入是否符合
      timeBlur () {
        if (this.form.openStayTime <= 0 && this.form.openStayTime !== '0') {
          this.$message.error(this.$t('configLazyLoad.channel.robotError1'))
          this.form.openStayTime = '0'
        }
        if (this.form.closeStayTime <= 0 && this.form.closeStayTime !== '0') {
          this.$message.error(this.$t('configLazyLoad.channel.robotError1'))
          this.form.closeStayTime = '0'
        }
      },
      queueKeepTimeBlur () {
        if (this.form.queueKeepTime > 720) {
          this.form.queueKeepTime = 720
        }
        if (this.form.queueKeepTime < 1) {
          this.form.queueKeepTime = 1
        }
      },
      // 编辑技能组，渲染dialog，记录编辑技能组列表的索引，通过this.isEdit[0]判断添加技能组还是编辑
      editSkill (index) {
        this.dialogVisible = true
        this.dealSkill.id = this.form.ToPeer[index].id
        this.dealSkill.name = this.form.ToPeer[index].name
        this.dealSkill.status = this.form.ToPeer[index].status
        this.isEdit[0] = false
        this.isEdit[1] = index
      },
      // 编辑技能组状态
      editStatus (index) {
        this.form.ToPeer[index].status = this.form.ToPeer[index].status === 'disable' ? 'enable' : 'disable'
      },
      setInviteStyle () {
        this.$emit('editInviteStyle')
      },
      robotSelectShow (show) {
        if (show) {
          this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
            if (res2 && res2.success && res2.data && res2.data.length > 0) {
              let aiRobot = res2.data
              let allRobot = this.robotConfig
              aiRobot.forEach((item1) => {
                item1._id = item1.Id
                item1.robot_name_new = item1.Nick
                let exist = allRobot.findIndex((all) => {
                  return all.Id === item1.Id
                })
                if (exist === undefined) {
                  allRobot.push(item1)
                } else {
                  allRobot.splice(exist, 1, item1)
                }
              })
              this.aiRobots = aiRobot
              this.robotConfig = allRobot
            }
          })
        }
      },
      showSkillDialog (show) {
        console.log(this.peerOptions)
        if (show) {
          this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
            let mailQueues = this.$getCache('mailQueues')
            if (!mailQueues || mailQueues.length === 0) {
              // 按照老版没有技能组时应该跳转到添加技能组页 暂不处理
              // $().alertmessage("showError", "您还没设置技能组，请先到【渠道技能组】添加技能组!");
              return
            }
            this.peerOptions = mailQueues || []
          })
        }
      }
    },
    // 获取机器人和技能组列表
    beforeMount () {
      this.inti(deepClone(this.basicData))
      this.basicSetInti(deepClone(this.basicData))
      this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
        let mailQueues = this.$getCache('mailQueues')
        if (!mailQueues || mailQueues.length === 0) {
          return
        }
        this.peerOptions = mailQueues || []
      })
      const sendData = {
        page: 1,
        limit: 10
      }
      this.$store.dispatch('querySessionForm', sendData).then((resp) => {
        if (resp && resp.success) {
          if (resp.list) {
            this.turnHumanOptions = deepClone(resp.list)
          }
        }
      })
      this.$store.dispatch('getCache', {type: 'robotConfig'}).then((res) => {
        if (res) {
          this.robotConfig = deepClone(res)
        }
        this.$store.dispatch('queryM7AIRobot', {}).then((res2) => {
          if (res2 && res2.success && res2.data && res2.data.length > 0) {
            let aiRobot = res2.data
            aiRobot.forEach((item1) => {
              item1._id = item1.Id
              item1.robot_name_new = item1.Nick
            })
            this.aiRobots = aiRobot
            let configArr = []
            this.robotConfig.forEach((config) => {
              if (config.robot_type !== 'didi') {
                configArr.push(config)
              }
            })
            this.robotConfig = configArr.concat(this.aiRobots)
            console.log(this.robotConfig)
          }
        })
      })
    },
    beforeDestroy () {
      this.m7uploaders.forEach(uploader => {
        uploader &&
        uploader.destroy &&
        uploader.destroy()
      })
      //      解除bus事件监听
      bus.$off('autoInviteData')
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .style_fig
    padding-bottom 40px
    .left_warp,.new_left_warp
      position: relative
      width: 600px
      float: left
      padding-left: 20px
    .left_warp
      height: calc(100vh - 207px)
    .new_left_warp
      height: calc(100vh - 90px)
    .save_config
      z-index: 10
      text-align right
      width 100%
      position: absolute
      bottom: 0
      right: 0
      background: #fff
      border-top: 1px solid $c-border2
      border-right: 1px solid #ccc
      .el-button
        margin 10px
    .chatbox_des
      text-align left
      font-size: 14px
      font-weight: 900
      line-height: 30px
    .ui-affix
      padding-bottom 0
    .fir_tit
      margin-top 14px
    .config
      margin-top 16px
      .el-input
      .el-select
      .el-textarea
        width 280px
      .wrapColor
        height 36px
        margin-top 10px
        .el-input
          width 100px
          margin 3px 0 0 10px
      .btn
        margin 6px 0 0 0
        min-width 90px
        height 24px
        line-height 24px
        text-align center
        display inline-block
        cursor pointer
        color $c-main
      .del_upload_file
        color $c-pink
        min-width 40px
        margin-left 10px
      .wrap_logo
        height 36px
        margin-bottom 6px
      .logo
        max-width 36px
        max-height 36px
        margin-right 20px
      .desc
        color $c-prompt
    .box
      height 500px
      border 1px solid $c-border2
      position relative
      overflow hidden
      .show
        width 250px
        height 300px
        position absolute
        bottom 60px
        box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 14px 1px
        border-radius: 5px 5px 0 0
        overflow: hidden
        .header
          height 50px
          .fll
            width: 130px
            display: inline-block
            text-align: center
            padding: 10px
            .logo_box
              display inline-block
              float left
              line-height 25px
            img
              max-height 25px
              max-width 50px
              vertical-align middle
            p
              color $cf-white
              overflow hidden
              text-overflow ellipsis
              white-space nowrap
              padding 5px 0 0 5px
              text-align: left
          div.fr
            margin 16px 6px 0 0
            span
              font-size 14px
              margin-left 12px
              color $cf-white
        .content
          font-size 12px
          padding 0 12px
          overflow: hidden
          :nth-child(1)
            margin-top 12px
          .avatar
            width: 30px
            border-radius: 50%
            float: left
            margin: 1px 10px 0 0 !important
          .fl
            height 30px
            background $c-border2
            line-height 30px
            padding 0 6px
            border-radius 4px
            position relative
          .fl:before
            display block
            content ""
            width 0
            height 0
            border-right 5px solid $c-border2
            border-top 4px solid transparent
            border-bottom 4px solid transparent
            position absolute
            left -5px
            top 10px
          .fr
            height 30px
            line-height 30px
            padding 0 6px
            border-radius 4px
            position relative
            margin-top 12px
            color #fff
            span
              display block
              width 0
              height 0
              border-top 4px solid transparent
              border-bottom 4px solid transparent
              position absolute
              right -5px
        .footer
          height 76px
          position: absolute
          width: 100%
          bottom: 0
          border-top: 1px solid $c-border2
          .iconfont
            font-size 20px
            color $cf-level3
            margin 4px 0 0 6px
            display block
          .comit
            width 40px
            height 16px
            font-size 12px
            color $cf-white
            line-height 16px
            text-align center
            border-radius 4px
            display block
            float right
            margin 30px 6px 0 0
      .kf
        position absolute
        color $cf-white
      .bottom_btn
        height 36px
        line-height 36px
        bottom 0
        padding 0 10px
        border-radius 4px 4px 0 0
        :nth-child(2)
          margin-left 6px
      .side_btn
        width 27px
        bottom 18px
        padding 10px 6px
        .iconfont
          margin-left 4px
        :nth-child(2)
          display inline-block
          width 12px
          padding 0 6px
          margin-top 6px
      .circle_btn
        background none
        .iconfont
          display block
          width 28px
          height 28px
          color $cf-white
          text-align center
          line-height 28px
          border-radius 50%
    .padding_bottom
      padding-bottom 12px
  .config
    .chat_box
      width 240px
      span
        display inline-block
        width 26px
        height 26px
        border-radius 3px
        margin-left 16px
        position relative
        cursor pointer
        span
          position absolute
          top 4px
          left 5px
          color $cf-white
          font-size 16px
      :nth-child(1)
        margin-left 0
      :nth-child(7)
        margin-left 0
        margin-top 12px
      :nth-child(8)
        margin-top 12px
    .btnSty
      width 240px
      span
        display inline-block
        width 26px
        height 26px
        background $cf-level4
        text-align center
        line-height 26px
        margin-left 16px
        color $cf-white
        margin-bottom 12px
        cursor pointer
      :nth-child(1)
        margin-left 0
      :nth-child(7)
        margin-left 0
      .span-back
        background $c-main
  .left_style
    height calc(100vh - 258px)
  .new_left_style
    height calc(100vh - 140px)
  .left_style,.new_left_style
    overflow-Y auto
    padding 20px 0
    min-width 500px
    border-right: 1px solid #ccc
    .btn-span
      color $c-main
      margin 0 5px
      cursor pointer
    .btnDel
      color $c-pink
    .btn-enable
      color $c-pink
    .win
      float: left
      margin-right: 13px
      box-sizing: border-box
      position: relative
      width: 60px
      height: 45px
      cursor pointer
      img
        width 100%
        height 100%
        float left
      .iconfont
        background: $c-main
        position: absolute
        color: #fff
        border-radius: 50%
        font-size: 10px
        padding: 2px
        width: 12px
        height: 12px
        bottom: -10px
        right: -8px
        display none
    .win0
      width 40px
    .active
      border: 1px solid  $c-main
      .iconfont
        display block
    .add_adv_btn
      margin: 20px 30px 0 0
  .grid-content
    margin-left 20px
  .right_style
    height calc(100vh - 208px)
    overflow-Y auto
    padding-right 20px
    .desc
      color: #3b5998
  /* 新设置页面中高度需要调整 */
  .new-config
    .right_style
      height calc(100vh - 112px)
      padding-top 20px
  .davLeft
  .davRight
    width: 100px
    height: 250px
    float: left
    background url("../../../../.././../assets/img/config/advBanner.png") no-repeat
    background-size: 100%
    img
      width 100%
      height 100%
  .questionToolTip
    display inline
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 16px
      border-radius 50%
      margin-left 2px
      .iconfont
        font-size 10px
        color $c-main
  a.scrollAdv
    margin: 27px 0 0 5px
    display: block
    float: left
    text-decoration: underline
    color: #888
  .float_adv
    display: block
    position: relative
    z-index: 1
    box-sizing: border-box
    width: 245px
    margin: 9px
    border: 1px solid $c-border2
    padding: 10px 20px
    background: #f7f7f7
    .float_icon
      width: 9px
      height: 8px
      display: block
      position: absolute
      background-size: 100%
  .advCenter
    position: relative
    height: 250px
    background-color: #f7f7f7
  .float_adv_content
    text-overflow: ellipsis
    white-space: nowrap
    overflow: hidden
  .area_link
    position relative
    margin-bottom 10px
    .el-button
      position absolute
      right 45px
  .welcomeTip
    cursor pointer
    display inline-block
    height 16px
    width 16px
    border 1px solid $c-main
    text-align center
    line-height 16px
    border-radius 50%
    margin-left 2px
    .iconfont
      font-size 10px
      color $c-main
  .openChatWayTip
    margin-top 10px
  .remark
    color #3b5998
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 16px
      border-radius 50%
      margin-left 2px
      .iconfont
        font-size 10px
        color $c-main
  .placeholder_box
    margin-top 10px
    dl
      border 1px solid $c-main
      color $c-main
      border-radius 6px
      display inline-block
      padding 4px
      margin 0 10px 10px 0
      cursor pointer
    .iconfont
      font-size 12px
  .icon-tixingweizhi
    border: none
  .basicSet
    .iconfont
      display inline-block
      width 16px
      height 16px
      border 1px solid $c-main
      border-radius 50%
      font-size 10px
      color $c-main
      text-align center
      line-height 16px
      margin-left 6px
    .el-form
      width: 96%
    .inviteInput
      display: inline-block;
      width: 60px;
      margin: 0 10px;
      height: 24px;
    .help-tips
      color $c-prompt
      padding-left 20px
    .setInviteStyle
      color $c-main
      cursor pointer
      margin 0 10px
  .prompt
    color $c-prompt
    line-height normal
    font-size 12px
  /* input输入框会遮住span标签的文字，需加高span标签的行高 */
  .sourse_cur
    line-height 24px
  //  div中的span标签，如果有font-size会产生无法对齐的情况
  .advertisingLi
    line-height 20px
    .el-switch
      font-size 0
  .openChatWay_img
    display inline-block
    width 60px
    vertical-align middle
  .openChatWayBox
    margin 22px 0
    label
      margin-right 10px
  .prompt
    color $c-main
    line-height normal
    font-size 12px
  .introduce
    margin-left 16px
  .priorityReceptionCheck
    margin-left 14px
</style>

